<template>
    <el-dialog
        title="编辑类别"
        class="dialog-box"
        :visible.sync="showTypeDialog"
        width="800px">
        <div class="type-box" v-loading="dialogLoading && showTypeDialog">
            <div class="type-input">
                <div class="left-input">
                    <template v-if="editorTypeSort">
                        <el-button type="success" @click="saveTypeSort">保存排序</el-button>
                    </template>
                    <template v-else>
                        <el-input
                            placeholder="搜索推荐标题关键字"
                            @keyup.enter.native="getTypeList"
                            style="width:200px;"
                            clearable
                            v-model.trim="keyWord">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <el-button type="primary" style="margin-left:10px" @click="getTypeList">搜索</el-button>
                        <el-button type="success" @click="createType">新建</el-button>
                    </template>
                </div>

                <div class="right-input" v-if="typeList && typeList.length && canEditorList">
                    <el-button type="info" v-if="editorTypeSort" @click="cancleEditor">取消排序</el-button>
                    <el-button type="warning" v-else @click="editorType">编辑排序</el-button>
                </div>
            </div>

            <div class="type-title-box">
                <div class="title-item" style="flex: 2;">类别名称</div>
                <div class="title-item">排序</div>
                <div class="title-item">状态</div>
                <div class="title-item" v-if="!editorTypeSort">操作</div>
            </div>

            <div class="type-content-box" v-if="typeList && typeList.length">
                <template v-if="editorTypeSort">
                    <div class="type-content-item" v-for="(item, index) in currentTypeList" v-dragging="{ item: item, list: currentTypeList}" :key="index + '_sort'">
                        <div class="item-box" style="flex: 2;">{{item.name}}</div>
                        <div class="item-box">{{index + 1}}</div>
                        <div class="item-box">
                            <span style="color:#67C23A;" v-if="item.status">显示中</span>
                            <span style="color:red;" v-else>已隐藏</span>
                        </div>
                    </div>
                </template>

                <template v-else>
                    <div class="type-content-item" :class="{'current-content-item': item._editor}" :id="'typeItem' + index" v-for="(item, index) in typeList" :key="index">
                        <div class="item-box" style="flex: 2;">
                            <el-input
                                v-if="item._editor"
                                placeholder="类别名称不可为空"
                                v-model.trim="inputValue">
                            </el-input>
                            <span v-else>{{item.name}}</span>
                        </div>
                        <div class="item-box">{{index + 1}}</div>
                        <div class="item-box">
                            <span style="color:#67C23A;" v-if="item.status">显示中</span>
                            <span style="color:red;" v-else>已隐藏</span>
                        </div>
                        <div class="item-box">
                            <div v-if="item._editor">
                                <div><el-button @click="saveItem(item)" type="text" size="small" style="color:#67C23A;">保存</el-button></div>
                                <div><el-button @click="cancleEditorItem(item)" type="text" size="small">取消</el-button></div>
                            </div>
                            <div v-else>
                                <div><el-button @click="editorItem(item, index)" type="text" size="small">编辑</el-button></div>
                                <div v-if="item.status === 1"><el-button @click="changeItem(item, 0)" type="text" size="small">隐藏</el-button></div>
                                <div v-else><el-button @click="changeItem(item, 1)" type="text" size="small" style="color:#67C23A;">显示</el-button></div>
                                <!-- <div><el-button @click="delItem(item, index)" type="text" size="small" style="color:red;">删除</el-button></div> -->
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <div class="type-no-data" v-else>暂无数据</div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            keyWord: '',
            showTypeDialog: false,
            dialogLoading: false, // 类型loading
            editorTypeSort: false, // 是否编辑排序
            typeList: [], // 类型列表
            canEditorList: true, // 是否可以编辑列表
            currentTypeList: [], // 临时缓存类型列表 用于拖拽排序
            inputValue: '', // 编辑类型名称
            editorItemIndex: -1 // 当前编辑的索引
        }
    },

    props: ['value'],

    created () {
        this.showTypeDialog = this.value
    },

    watch: {
        value (val) {
            this.showTypeDialog = val
        },

        showTypeDialog (val) {
            if (val) {
                this.getTypeList()
            } else {
                this.editorTypeSort = false
            }
            this.$emit('input', val)
        }
    },

    methods: {
        // 获取类型列表
        async getTypeList () {
            if (this.dialogLoading) return
            this.canEditorList = true
            this.dialogLoading = true
            let params = {
                pageNum: 1,
                pageSize: 100,
                keyWord: this.keyWord
            }
            let res = await this.$http.get('/trade/selectActivityCategory', {
                params
            })
            if (res.code === '0' && res.data && res.data.list) {
                // 如果有查询条件  说明查询出来的列表不是全部内容 不可以排序
                if (params.keyWord) {
                    this.canEditorList = false
                }
                // 每次搜索初始化 编辑状态
                this.editorItemIndex = -1
                let data = res.data.list
                data.forEach((item) => {
                    item._editor = false
                })
                this.typeList = data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.dialogLoading = false
        },

        // 新建类型
        createType () {
            if (this.editorItemIndex > -1) {
                this.$message({
                    message: '你有正在编辑的类型，请保存后新建！',
                    type: 'warning'
                })
                window.location.href = '#typeItem' + this.editorItemIndex
                return
            }
            // 新建初始化输入框的内容
            this.inputValue = ''
            this.typeList.unshift({
                name: '',
                status: 0,
                _editor: true
            })
            this.editorItemIndex = 0
            window.location.href = '#typeItem' + this.editorItemIndex
        },

        // 开启排序
        editorType () {
            if (this.editorItemIndex > -1) {
                this.$message({
                    message: '你有正在编辑的类型，请保存后排序！',
                    type: 'warning'
                })
                window.location.href = '#typeItem' + this.editorItemIndex
                return
            }
            this.currentTypeList = JSON.parse(JSON.stringify(this.typeList))
            this.editorTypeSort = true
        },

        // 取消排序
        cancleEditor () {
            this.editorTypeSort = false
        },

        // 保存排序
        async saveTypeSort () {
            this.dialogLoading = true
            this.currentTypeList.forEach((item, index) => {
                item.sort = index + 1
            })
            let res = await this.$http.post('/trade/updateActivityCategorySort', this.currentTypeList)
            if (res.code === '0') {
                this.typeList = this.currentTypeList
                this.$message({
                    type: 'success',
                    message: '修改排序成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.dialogLoading = false
            this.editorTypeSort = false
        },

        // 编辑类型
        editorItem (item, index) {
            if (this.editorItemIndex > -1) {
                this.$message({
                    message: '你有正在编辑的类型，不要同时编辑哦！',
                    type: 'warning'
                })
                window.location.href = '#typeItem' + this.editorItemIndex
                return
            }
            this.inputValue = item.name
            this.editorItemIndex = index
            item._editor = true
        },

        // 保存类型
        async saveItem (item) {
            if (!this.inputValue) {
                this.$message({
                    message: '类别名称不可为空！',
                    type: 'warning'
                })
                return
            }
            let res = await this.$http.get('/trade/updateActivityCategory', {
                params: {
                    id: item.id,
                    name: this.inputValue,
                    status: item.status
                }
            })
            if (res.code === '0') {
                this.editorItemIndex = -1
                item.name = this.inputValue
                item.id = res.data.id
                item._editor = false
                this.$message({
                    type: 'success',
                    message: '保存成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 取消保存类型
        cancleEditorItem (item) {
            if (item.id) {
                item._editor = false
            } else {
                this.typeList.shift()
            }
            this.editorItemIndex = -1
        },

        // 切换类型状态
        async changeItem (item, status) {
            let res = await this.$http.get('/trade/updateActivityCategory', {
                params: {
                    id: item.id,
                    status
                }
            })
            if (res.code === '0') {
                item.status = status
                this.$message({
                    type: 'success',
                    message: '修改成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 删除类型
        delItem (item, index) {
            this.$confirm(`此操作将永久删除该类别 ${item.name} , 是否继续?`, '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
                this.typeList.splice(index, 1)
            }).catch(() => {
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .dialog-box {
        /deep/ .el-dialog__body {
            padding: 0 20px 20px;
        }

        .type-input {
            display: flex;
            justify-content: space-between;
        }

        .type-box {
            .type-title-box {
                border: 1px solid #EBEEF5;
                border-right: none;
                display: flex;
                margin-top: 16px;
                // padding-right: 15px;
                .title-item {
                    padding: 12px 10px;
                    flex: 1;
                    border-right: 1px solid #EBEEF5;
                    color: #909399;
                    font-size: 14px;
                    font-weight: 700;
                }
            }

            .type-content-box {
                height: 400px;
                overflow-y: scroll;
                .type-content-item {
                    display: flex;
                    border-left: 1px solid #EBEEF5;
                    border-bottom: 1px solid #EBEEF5;
                    &:hover {
                        background-color: #F5F7FA;
                    }
                    .item-box {
                        padding: 12px 10px;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        border-right: 1px solid #EBEEF5;
                    }
                }
                .current-content-item {
                    background-color: rgb(239, 245, 253);
                    &:hover {
                        background-color: rgb(239, 245, 253);
                    }
                }
            }

            .type-no-data {
                height: 100px;
                padding: 30px;
                text-align: center;
                border: 1px solid #EBEEF5;
                border-top: none;
            }
        }
    }
</style>
